import { FC } from "react";

import "./index.less";

import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Typography, Button, Form, Input, message } from "antd";

import axios from "axios";

import { useNavigate } from "react-router-dom";

const Index: FC = () => {
  const [form] = Form.useForm();

  const navigate = useNavigate();

  // const onFinish = (values: any) => {
  //   console.log("Received values of form: ", values);
  // };

  const login = () => {
    // 获取所有的表单字段
    // console.log(form.getFieldsValue());

    // 获取某一个字段
    // console.log(form.getFieldValue("username"));

    // 重置表单
    // form.resetFields();

    // 修改表单的初始值，不能用useState，只能使用form实例的setFieldsValue方法
    // form.setFieldsValue({ username: "lisi" });

    // 希望有表单的校验，需要使用validateFields方法
    form
      .validateFields()
      .then((values) => {
        // console.log(values);
        axios
          .post("http://121.89.205.189:3000/admin/admin/login", values)
          .then((res) => {
            console.log(res);

            if (res.data.code === "200") {
              localStorage.setItem("token", res.data.data.token);
              localStorage.setItem("adminname", res.data.data.adminname);
              navigate("/home");
            } else {
              message.error(res.data.message);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      })
      .catch((errorInfo) => {
        console.log(errorInfo);
      });
  };

  return (
    <div className="login">
      <div className="login-content">
        <Typography.Title level={3} style={{ textAlign: "center" }}>
          嗨购后台管理系统
        </Typography.Title>

        <Form
          form={form}
          name="normal_login"
          className="login-form"
          // 表单初始值
          // initialValues={{ adminname: "zhangsan" }}
          // onFinish={onFinish}
        >
          <Form.Item
            // name是最终得到的那个对象的key
            name="adminname"
            // rules用于做校验规则
            rules={[
              { required: true, message: "Please input your Username!" },
              // {
              //   max: 6,
              //   message: "太长了",
              // },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "Please input your Password!" }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          {/* <Form.Item></Form.Item> */}
        </Form>

        <Button
          type="primary"
          htmlType="submit"
          className="login-form-button"
          style={{ width: "100%" }}
          onClick={login}
        >
          Log in
        </Button>
      </div>
    </div>
  );
};

export default Index;
